import React from 'react'

import Modal from '../Modal/'
import ModalTitle from '../Modal/ModalTitle'
import Flex from '../../components/Flex'
import { GradientButton } from '../../components/Button'
import styled from 'styled-components'

const Prompt = ({ isOpen, title, children, onOk, onCancel }) => {
    return (
        <Modal isOpen={isOpen}>
            <Containers column="column">
                <TitleContainers>
                    <Title>{title}</Title>
                </TitleContainers>
                <Context column="column">
                    {children}
                    <ButtonRow justify="space-around">
                        <GradientButton
                            minWidth="100px"
                            fullHeight="40px"
                            isPurple={'true'}
                            borderWidth="1px"
                            radius={'true'}
                            onClick={onCancel}
                        >
                            取消
                        </GradientButton>
                        <GradientButton
                            minWidth="100px"
                            fullHeight="40px"
                            isPurple={'true'}
                            radius={'true'}
                            hovered
                            onClick={onOk}
                        >
                            确认
                        </GradientButton>
                    </ButtonRow>
                </Context>
            </Containers>
        </Modal>
    )
}

export default Prompt

const ButtonRow = styled(Flex)`
    padding-top: 32px;
`
const Title = styled(Flex)`
    color: white;
    font-size: 20px;
`

const Containers = styled(Flex)`
    border-radius: 10px;
    overflow: hidden;
`
const TitleContainers = styled(ModalTitle)`
    display: flex;
    justify-content: center;
    align-items: center;
`
const Context = styled(Flex)`
    background: #ffffff;
    padding: 30px 84px;
`



// WEBPACK FOOTER //
// ./src/containers/Prompt/index.js